/* eslint-disable vue/require-valid-default-prop */
import { MciButton } from '@/components/base';
import { ElDialog } from 'element-plus';
import { PropType } from 'vue';
import './index.scss';

export const MciDialog = defineComponent({
  name: 'MciDialog',
  extends: ElDialog,
  props: {
    /** Dialog标题 */
    title: {
      type: String,
      default: ''
    },
    appendToBody: {
      type: Boolean,
      default: ''
    },
    draggable: {
      type: Boolean,
      default: false
    },
    /** 确认按钮文案 */
    confirmText: {
      type: [String],
      default: '确定'
    },
    /* 确认按钮是否禁用 */
    confirmDisabled: {
      type: Boolean,
      default: false
    },
    /** 取消按钮文案 */
    cancelText: {
      type: [String],
      default: '取消'
    },
    /** 是否显示确认按钮 */
    showConfirmBtn: {
      type: Boolean,
      default: true
    },
    /** 是否显示取消按钮 */
    showCancelBtn: {
      type: Boolean,
      default: true
    },
    /** 提交完成后自动关闭 */
    isConfirmClose: {
      type: Boolean,
      default: true
    },
    /** 点击提交 */
    confirmHandle: {
      type: Function as unknown as PropType<(loadingCallback?: ILoadingCallback) => void | Promise<any>>,
      default: () => () => {}
    },
    /** 取消按钮完成后自动关闭 */
    isCancelClose: {
      type: Boolean,
      default: true
    },
    /** 点击取消 */
    cancelHandle: {
      type: Function as unknown as PropType<(loadingCallback?: ILoadingCallback) => void | Promise<any>>,
      default: () => () => {}
    },
    /** 显示底部 */
    showFooter: {
      type: Boolean,
      default: true
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: Boolean,
      default: false
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number],
      default: '36%'
    },
    top: {
      type: String,
      default: ''
    },
    customClass: {
      type: String,
      default: ''
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'close'],
  setup(props, { emit }) {
    const cancelLoading = ref(false);
    const confirmLoading = ref(false);
    const updateVisible = (val: boolean) => emit('update:modelValue', val);
    /** 取消按钮点击 */
    const cancelClickHandle = async () => {
      // 提交中，不能取消
      if (confirmLoading.value) return;
      try {
        cancelLoading.value = true;
        const loadingCb = (isLoading: boolean) => {
          cancelLoading.value = isLoading;
        };
        props.cancelHandle && (await props.cancelHandle(loadingCb));
      } finally {
        cancelLoading.value = false;
        if (props.isCancelClose) {
          updateVisible(false);
        }
      }
    };

    const onClose = () => {
      emit('close');
    };

    /** 确认按钮点击 */
    const confirmClickHandle = async () => {
      const loadingCb = (isLoading: boolean) => {
        confirmLoading.value = isLoading;
      };
      props.confirmHandle && (await props.confirmHandle(loadingCb));
      if (props.isConfirmClose) {
        updateVisible(false);
      }
    };
    return {
      cancelClickHandle,
      confirmClickHandle,
      updateVisible,
      cancelLoading,
      confirmLoading,
      onClose
    };
  },
  render() {
    const {
      cancelText,
      $slots,
      confirmText,
      confirmLoading,
      cancelLoading,
      showFooter,
      closeOnClickModal,
      modelValue,
      cancelClickHandle,
      confirmClickHandle,
      updateVisible,
      confirmDisabled,
      customClass
    } = this;

    const defaultFooterSlot = () => {
      if (!showFooter) return null;
      return (
        <>
          <MciButton loading={cancelLoading} onClick={cancelClickHandle} class="flex-1">
            {cancelText}
          </MciButton>
          <MciButton
            disabled={confirmDisabled}
            loading={confirmLoading}
            type="primary"
            onClick={confirmClickHandle}
            class="flex-1 ml-8">
            {confirmText}
          </MciButton>
        </>
      );
    };
    const slots = {
      ...$slots,
      footer: $slots.footer ?? defaultFooterSlot
    };
    const attrs = {
      'onUpdate:modelValue': updateVisible
    };
    return (
      <ElDialog
        modelValue={modelValue}
        title={this.title}
        width={this.width}
        class={`mci-dialog ${this.showFooter ? '' : 'is-hide-footer'} ${customClass || ''}`}
        close-on-click-modal={closeOnClickModal}
        fullscreen={this.fullscreen}
        onClose={this.onClose}
        appendToBody={this.appendToBody}
        draggable={this.draggable}
        top={this.top}
        alignCenter={this.alignCenter}
        destroyOnClose={this.destroyOnClose}
        {...attrs}
        vSlots={slots}
      />
    );
  }
});

export interface ILoadingCallback {
  (isLoading: boolean): void;
}
